<template>
    <div class="header">
        <van-icon name="arrow-left" @click="backTo" />
    </div>
    <div class="edit">
        <div class="opt opt-1">
            <van-uploader v-model="fileList" :max-count="1" :after-read="afterRead" />
        </div>
        <div class="opt opt-1">
            <van-button @click="saveUserImgFn" plain type="success" size="small">保存头像</van-button>
        </div>
        <div class="opt opt-2">
            <span class="label">昵称：</span>
            <input type="text" v-model="form.nickName" class="inp" :disabled="isEdit" placeholder="请输入昵称">
        </div>

        <div class="opt opt-2">
            <span class="label">电话：</span>
            <input type="text" v-model="form.phone" class="inp" :disabled="isEdit" placeholder="请输入电话">
        </div>
        <div class="opt opt-2">
            <span class="label">年龄：</span>
            <input type="text" v-model="form.age"  class="inp" :disabled="isEdit"  placeholder="请输入年龄">
        </div>
        <div class="opt opt-2">
            <span class="label">性别：</span>
            <input type="text" v-model="form.sex"  class="inp" :disabled="isEdit"  placeholder="请输入性别">
        </div>
        <div class="opt opt-2">
            <span class="label">地址：</span>
            <input type="text" v-model="form.address"  class="inp" :disabled="isEdit"  placeholder="请输入地址">
        </div>
        <div class="opt opt-1">
            <van-button @click="isEdit=false" plain type="warning" size="small">编辑</van-button>
            <van-button @click="saveUserInfo" style="margin-left: 10px;" plain type="success" size="small">保存修改</van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import request from '@/api/request'
import {useRouter } from 'vue-router'
import { showFailToast, showSuccessToast, showToast } from 'vant';
import { reactive } from 'vue';
const $router = useRouter();
const formData = new FormData();
const afterRead = (data: any) => {
    // 此时可以自行将文件上传至服务器
    // console.log(data);
    formData.append('photo',data.file);
}
// 用户的临时身份
let token = localStorage.getItem("AUTOTOKEN")

// 预览图片
const fileList = ref<any>([
    {url: localStorage.getItem("USERIMG")}
])

// 保存用户头像
const saveUserImgFn = async () => {
    if(token == null) {
        return false;
    }
    let imgUrl;
    await request.photoUpload(formData)
    .then(
        content=>{
            console.log(content)
            let {code , msg , picUrl} = content;
            if(code == 200) {
                imgUrl = picUrl;
            }
            else {
                showToast(msg)
            }
        }
    )

    if(imgUrl) {
        // 设置用户头像的接口
        await request.userImg({token , imgUrl})
        .then(
            content=>{
                let {msg} = content;
                showToast(msg)
            }
        )
    }
}

// 导航首页
const backTo = ()=> {
    $router.go(-1)
}
// 编写用户信息
// token, age,sex,address,phone 
const isEdit = ref(true);
const form = reactive<any>({})
// 获取用户信息
const getUserInfo = async ()=> {
    request.userInfo({token})
    .then(
        content=>{
            // console.log(content)
            let {code,result:[user]} = content;
            // console.log(user);
            if(code == 200) {
                form.phone = user.phone;
                form.address = user.address;
                form.sex = user.sex;
                form.age = user.age;
                form.nickName = user.nickName;
            }
        }
    )
}

getUserInfo();

// 保存编辑修改
const saveUserInfo = async ()=> {
    let {age,sex,address,phone, nickName } = form;
    if(token) {
        if(age && sex && address && phone) {
            // 调用编辑用户信息的API
            request.userEdit({token, age,sex,address,phone,nickName})
            .then(
                (content: any)=>{
                    // console.log(content)
                    let {msg,code} = content;
                    if(code == 200) {
                        showSuccessToast('保存成功');
                    }
                    else {
                        showFailToast(msg);
                    }
                }
            )
        }
        else {
            showToast("输入框不能为空")
        }
        
    }
}
</script>




<style lang="less">
@import '../../static/less/variable.less';
.header {
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #cccccc;
}
.edit {
    padding: @pad;
    margin-top: 20px;
    .opt {
        margin-bottom: 15px;
    }
    .opt-1 {
        text-align: center;
    }
    .opt-2 {
        width: 100%;
        display: flex;
        align-items: center;
        .label {
            display: inline-block;
            width: 80px;
            font-size: 16px;
            flex-shrink: 0;
            text-align: right;
            padding-right: 10px;
            // background-color: red;
            height: 40px;
            line-height: 40px;
        }
        .inp {
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
        }
    }
}
</style>